<template>
    <div class="box">
        <ChartShow name="任务一：撰写“印象广西、爱心传递”的发言稿" :option="option1" />
        <ChartShow name="任务二：为慈善助学活动配上一副海报" :option="option2" />
    </div>
</template>

<script setup>
import ChartShow from '@/components/ChartShow.vue'
const option1 = {
    title: {
        text: '任务一：撰写“印象广西、爱心传递”的发言稿',
        textStyle: {
            color: 'white'
        }
    },
    tooltip: {},
    legend: {
        data: ['知行组',
            '好学组',
            '善学组',
            '力行组',
            '思行组',
            '崇学组'
        ],
        textStyle: {
            color: 'white',
        },
        bottom: 7,
    },
    xAxis: {
        data: ['知行组',
            '好学组',
            '善学组',
            '力行组',
            '思行组',
            '崇学组'
        ],
        axisLabel: {
            textStyle: {
                fontSize: '25',
                color: 'white'
            }
        } 
    },
    yAxis: {
        min: 0,
        max: 100,
        axisLabel: {
            textStyle: {
                fontSize: '15',
                color: 'white'
            }
        }
    },
    series: {
        type: 'bar',
        data: [82,
            87,
            84,
            81,
            85,
            88
        ],
        colorBy: 'value',
        label: {
            show: true,
            position: 'top',
            color: 'white',
            fontSize: 25
        },
    }
}
const option2 = {
    title: {
        text: '任务二：为慈善助学活动配上一副海报',
        textStyle: {
            color: 'white'
        }
    },
    tooltip: {},
    legend: {
        data: ['知行组',
            '好学组',
            '善学组',
            '力行组',
            '思行组',
            '崇学组'
        ],
        textStyle: {
            color: 'white',
        },
        bottom: 7,
    },
    xAxis: {
        data: ['知行组',
            '好学组',
            '善学组',
            '力行组',
            '思行组',
            '崇学组'
        ],
        axisLabel: {
            textStyle: {
                fontSize: '25',
                color: 'white'
            }
        }
    },
    yAxis: {
        min: 0,
        max: 100,
        axisLabel: {
            textStyle: {
                fontSize: '15',
                color: 'white'
            }
        }
    },
    series: {
        type: 'bar',
        data: [62,
            88,
            64,
            83,
            70,
            72

        ],
        colorBy: 'value',
        label: {
            show: true,
            position: 'top',
            color: 'white',
            fontSize: 25
        },
    }
}
</script>

<style lang="scss" scoped>
.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;

    div {
        background-color: #324374;
        box-shadow: 0 0 10px rgb(34, 31, 38);
        width: 1200px;
        height: 800px;
    }

}
</style>